<template>
	<div>
		<el-dialog
			title="机器验证"
			:visible.sync="isShow"
			width="450px"
			center
		>
			<el-row>
				<el-col :span="24">
					<div
						style="text-align:center;"
						@click="getImgCode"
					>
						<img
							style="cursor:pointer;"
							width="200px"
							height="100px"
							src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
							alt="图片验证码"
						>
					</div>
					<br>
					<br>
				</el-col>
				<el-col :span="24">
					<el-input
						style="width:60%;margin-left:20%;"
						v-model="vCode"
						placeholder="请输入图片中的验证码"
					></el-input>
					<br>
					<br>
					<br>
				</el-col>
				<el-col :span="24">
					<el-button
						style="width:20%;margin-left:40%;"
						type="info"
						@click.native="vCodeV(vCode)"
						plain
						:disabled="vCode ? false : true"
					>验证</el-button>
				</el-col>
			</el-row>
		</el-dialog>
		<el-card
			class="box-card"
			shadow="hover"
		>
			<div>
				<div style="text-align:center;">
					<h2>企业信息管理后台</h2>
				</div>
				<el-form
					:model="form"
					ref="form"
					:rules="rules"
					style="padding: 20px;"
					@submit-native-prevent="signup"
				>
					<el-form-item prop="username">
						<el-input
							placeholder="请输入用户名"
							v-model="form.username"
							clearable
							prefix-icon="el-icon-user-solid"
						>
						</el-input>
					</el-form-item>
					<el-form-item prop="phoneNumber">
						<el-input
							placeholder="请输入手机号"
							v-model="form.phoneNumber"
							clearable
							prefix-icon="el-icon-phone"
						>
						</el-input>
					</el-form-item>
					<el-form-item prop="inputCode">
						<el-row>
							<el-col :span="15">
								<el-input
									placeholder="请输入短信验证码"
									v-model="form.inputCode"
									prefix-icon="el-icon-message"
								></el-input>
							</el-col>
							<el-col
								:span="9"
								style="text-align:right;"
							>
								<el-button
									type="info"
									@click.native="isShow = !isShow"
									plain
								>获取验证码</el-button>
							</el-col>
						</el-row>
					</el-form-item>
					<el-form-item prop="password">
						<el-input
							placeholder="请输入密码"
							v-model="form.password"
							show-password
							prefix-icon="el-icon-lock"
						></el-input>
					</el-form-item>
					<el-form-item>
						<el-row>
							<el-col :span="24">
								<el-button
									type="info"
									style="width:100%;"
									@click="signup('form')"
								>注册</el-button>
							</el-col>
						</el-row>
					</el-form-item>
					<el-form-item>
						<el-button type="text" @click.native="toLogin">已有账号？前往登录</el-button>
						<el-row>
							<el-col :span="24">
							</el-col>
						</el-row>
					</el-form-item>
				</el-form>
			</div>
		</el-card>
	</div>
</template>

<script>
export default {
	data() {
		return {
			isShow: false,
			vCode: "",
			form: {
				username: "",
				password: "",
				rememberMe: false,
				inputCode: "",
				mCode: "",
				isShow: false,
			},
			rules: {
				username: [
					{ required: true, message: "请输入用户名", trigger: "blur" },
				],
				phoneNumber: [
					{ required: true, message: "请输入手机号", trigger: "blur" },
				],
				password: [{ required: true, message: "请输入密码", trigger: "blur" }],
				inputCode: [
					{ required: true, message: "请输入短信验证码", trigger: "blur" },
					{ min: 6, max: 6, message: "验证码格式错误", trigger: "blur" },
				],
			},
		};
	},
	methods: {
		signup(formData) {
			this.$refs[formData].validate((valid) => {
				if (valid) {
					console.log(this.form);
					this.$router.push('/login');
				} else {
					console.log("error submit!!");
					return false;
				}
			});
		},
		getImgCode() {
			// 请求接口获取图片验证码
			console.log("获取图片验证码");
		},
		vCodeV() {
			this.isShow = !this.isShow;
			console.log("验证码校验");
			console.log(this.vCode);
			// 请求接口获取验证码
			// 验证码 匹配正确 则 请求 发送短信验证码的 接口
		},
		toLogin() {
			this.$router.push('/login');
		}
	},
};
</script>

<style>
.box-card {
	width: 400px;
	margin: auto;
	margin-top: 120px;
	border-radius: 10px;
}
.transition-box {
	width: 150px;
	line-height: 40px;
	border-radius: 4px;
	box-sizing: border-box;
}
</style>